import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class DevicesPage extends StatefulWidget {
  const DevicesPage({super.key});

  @override
  State<DevicesPage> createState() => _DevicesPageState();
}

class _DevicesPageState extends State<DevicesPage> {
  final List<String> _devices = [
    'iPhone 14 Pro • 上海',
    'MacBook Pro M2 • 北京',
    'Windows 11 PC • 昆明',
  ];

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final color = Theme.of(context).colorScheme;

    return Scaffold(
      appBar: AppBar(title: Text(l10n.securitySettingsLoggedInDevices)),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: _devices.length,
        itemBuilder: (context, index) {
          final device = _devices[index];
          return Dismissible(
            key: Key(device),
            direction: DismissDirection.endToStart,
            background: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              alignment: Alignment.centerRight,
              decoration: BoxDecoration(
                color: color.error,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Icon(Icons.delete, color: Colors.white),
            ),
            onDismissed: (_) {
              setState(() => _devices.removeAt(index));
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                    content: Text('$device ${l10n.loggedInDevicesRemoved}')),
              );
            },
            child: Card(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16)),
              elevation: 1,
              margin: const EdgeInsets.only(bottom: 12),
              child: ListTile(
                leading: const Icon(Icons.devices),
                title: Text(device),
                subtitle:
                    Text('${l10n.loggedInDevicesLastLogin}：2025-08-22 14:30'),
              ),
            ),
          );
        },
      ),
    );
  }
}
